{% extends 'base_dashboard.html' %}
{% load static %}

{% block title %}Academy Settings — {{ site_settings.institute_name }}{% endblock %}

{% block extra_css %}
<style>
  .settings-hero {
    background: linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-primary) 100%);
    border-radius: 1rem;
    color: #fff;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
  }
  .settings-tabs .nav-link {
    border: none;
    border-radius: .75rem;
    color: #64748b;
    font-weight: 600;
    font-size: .875rem;
    padding: .65rem 1rem;
  }
  .settings-tabs .nav-link.active {
    background: color-mix(in srgb, var(--brand-primary) 12%, white);
    color: var(--brand-primary);
  }
  .settings-card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 4px 24px rgba(15, 37, 87, .06);
  }
  .settings-card .card-body { padding: 1.5rem 1.75rem; }
  .settings-section-title {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 1rem;
  }
  .logo-preview {
    width: 120px; height: 56px;
    object-fit: contain;
    background: var(--brand-secondary);
    border-radius: .75rem;
    padding: .5rem;
  }
  .pay-toggle-card {
    border: 1.5px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.1rem 1.25rem;
    transition: border-color .15s, box-shadow .15s;
  }
  .pay-toggle-card.is-on {
    border-color: #93c5fd;
    background: #f8fbff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .08);
  }
  .form-hint { font-size: .78rem; color: #64748b; }
  .webhook-box {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: .75rem;
    padding: .85rem 1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .78rem;
    word-break: break-all;
  }
</style>
{% endblock %}

{% block content %}
<div class="settings-hero d-flex flex-wrap justify-content-between align-items-center gap-3">
  <div>
    <div class="small text-white-50 mb-1">Admin · Configuration</div>
    <h3 class="fw-bold mb-1">Academy Settings</h3>
    <p class="mb-0 text-white-50 small">Brand, theme, currency, payments, and email / SMTP for your academy.</p>
  </div>
  <div class="d-flex align-items-center gap-2">
    {% if settings_obj.has_logo_light %}
    <img src="{{ settings_obj.logo_light_url }}" alt="Logo" class="logo-preview">
    {% elif settings_obj.has_logo_dark %}
    <img src="{{ settings_obj.logo_dark_url }}" alt="Logo" class="logo-preview">
    {% else %}
    <span class="badge text-bg-light text-dark">No logo uploaded</span>
    {% endif %}
  </div>
</div>

{% if form.non_field_errors %}
  <div class="alert alert-danger">{{ form.non_field_errors }}</div>
{% endif %}

<form method="post" enctype="multipart/form-data" novalidate>
  {% csrf_token %}

  <ul class="nav settings-tabs gap-1 mb-3" id="settingsTabs" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="brand-tab" data-bs-toggle="tab" data-bs-target="#brand" type="button" role="tab">
        <i class="bi bi-building me-1"></i>Branding
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="certificates-tab" data-bs-toggle="tab" data-bs-target="#certificates" type="button" role="tab">
        <i class="bi bi-award me-1"></i>Certificates
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="theme-tab" data-bs-toggle="tab" data-bs-target="#theme" type="button" role="tab">
        <i class="bi bi-palette me-1"></i>Theme &amp; Colors
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="pricing-tab" data-bs-toggle="tab" data-bs-target="#pricing" type="button" role="tab">
        <i class="bi bi-currency-exchange me-1"></i>Pricing &amp; Currency
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="payments-tab" data-bs-toggle="tab" data-bs-target="#payments" type="button" role="tab">
        <i class="bi bi-credit-card me-1"></i>Payments
      </button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="email-tab" data-bs-toggle="tab" data-bs-target="#email" type="button" role="tab">
        <i class="bi bi-envelope-at me-1"></i>Email / SMTP
      </button>
    </li>
  </ul>

  <div class="tab-content">
    <!-- Branding -->
    <div class="tab-pane fade show active" id="brand" role="tabpanel">
      <div class="card settings-card mb-3">
        <div class="card-body">
          <div class="settings-section-title">Institute identity</div>
          <div class="row g-3">
            <div class="col-md-8">
              <label class="form-label fw-semibold">Institute / Academy name</label>
              {{ form.institute_name }}
              <div class="form-hint mt-1">Shown in navbar, page titles, emails, and student payment screens.</div>
              {% if form.institute_name.errors %}<div class="text-danger small">{{ form.institute_name.errors.0 }}</div>{% endif %}
            </div>
            <div class="col-md-4">
              <label class="form-label fw-semibold">Tagline</label>
              {{ form.tagline }}
              {% if form.tagline.errors %}<div class="text-danger small">{{ form.tagline.errors.0 }}</div>{% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Light logo</label>
              {{ form.logo }}
              <div class="form-hint mt-1">
                White / light artwork for <strong>dark</strong> backgrounds (navbar, login brand panel).
                Clear the checkbox to remove it.
              </div>
              {% if form.logo.errors %}<div class="text-danger small">{{ form.logo.errors.0 }}</div>{% endif %}
              {% if settings_obj.has_logo_light %}
                <div class="mt-2 p-2 rounded" style="background:#0f2557;display:inline-block;">
                  <img src="{{ settings_obj.logo.url }}" alt="Light logo" style="max-height:48px;">
                </div>
              {% else %}
                <div class="mt-2 small text-muted">No light logo — dark panel shows institute name.</div>
              {% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Dark logo</label>
              {{ form.logo_dark }}
              <div class="form-hint mt-1">
                Dark / colored artwork for <strong>light</strong> backgrounds (login form side).
                Clear the checkbox to remove it.
              </div>
              {% if form.logo_dark.errors %}<div class="text-danger small">{{ form.logo_dark.errors.0 }}</div>{% endif %}
              {% if settings_obj.has_logo_dark %}
                <div class="mt-2 p-2 rounded border bg-white" style="display:inline-block;">
                  <img src="{{ settings_obj.logo_dark.url }}" alt="Dark logo" style="max-height:48px;">
                </div>
              {% else %}
                <div class="mt-2 small text-muted">No dark logo — light panels fall back to light logo or name.</div>
              {% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Favicon</label>
              {{ form.favicon }}
              <div class="form-hint mt-1">Small square icon for browser tabs.</div>
              {% if form.favicon.errors %}<div class="text-danger small">{{ form.favicon.errors.0 }}</div>{% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Certificates -->
    <div class="tab-pane fade" id="certificates" role="tabpanel">
      <div class="card settings-card mb-3">
        <div class="card-body">
          <div class="settings-section-title">Certificate verification &amp; signing</div>
          <p class="text-muted small mb-3">
            The verify URL is printed on every hard and soft certificate as <strong>Verify At</strong>.
            Students download a soft copy; only admin/staff can print the official hard copy.
          </p>
          <div class="row g-3">
            <div class="col-12">
              <label class="form-label fw-semibold">Verify At URL</label>
              {{ form.certificate_verify_url }}
              <div class="form-hint mt-1">
                Example: <code>https://yourdomain.com/certifications/verify/</code>.
                Leave blank to use this site’s built-in verification page.
              </div>
              {% if form.certificate_verify_url.errors %}<div class="text-danger small">{{ form.certificate_verify_url.errors.0 }}</div>{% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Signer name</label>
              {{ form.certificate_signer_name }}
              {% if form.certificate_signer_name.errors %}<div class="text-danger small">{{ form.certificate_signer_name.errors.0 }}</div>{% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Signer title</label>
              {{ form.certificate_signer_title }}
              {% if form.certificate_signer_title.errors %}<div class="text-danger small">{{ form.certificate_signer_title.errors.0 }}</div>{% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Signature image</label>
              {{ form.certificate_signature }}
              <div class="form-hint mt-1">Director signature shown on certificates. Replace anytime.</div>
              {% if form.certificate_signature.errors %}<div class="text-danger small">{{ form.certificate_signature.errors.0 }}</div>{% endif %}
              {% if settings_obj.has_certificate_signature %}
                <div class="mt-2 p-2 rounded border bg-white d-inline-block">
                  <img src="{{ settings_obj.certificate_signature.url }}" alt="Signature" style="max-height:48px;">
                </div>
              {% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Official seal</label>
              {{ form.certificate_seal }}
              <div class="form-hint mt-1">Golden seal (or other seal) shown at the bottom center. Replace anytime.</div>
              {% if form.certificate_seal.errors %}<div class="text-danger small">{{ form.certificate_seal.errors.0 }}</div>{% endif %}
              {% if settings_obj.has_certificate_seal %}
                <div class="mt-2 p-2 rounded border bg-white d-inline-block">
                  <img src="{{ settings_obj.certificate_seal.url }}" alt="Seal" style="max-height:64px;">
                </div>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Theme -->
    <div class="tab-pane fade" id="theme" role="tabpanel">
      <div class="card settings-card mb-3">
        <div class="card-body">
          <div class="settings-section-title">Color scheme</div>
          <p class="text-muted small mb-3">Choose a preset or pick custom colors. Changes apply site-wide after saving.</p>
          <div class="mb-4">
            <label class="form-label fw-semibold">Theme preset</label>
            {{ form.theme_preset }}
            <div class="form-hint mt-1">Presets fill the colors below automatically. Select <strong>Custom colors</strong> to fine-tune.</div>
          </div>
          <div class="row g-3" id="customColorRow">
            <div class="col-6 col-md-3">
              <label class="form-label fw-semibold">Primary</label>
              {{ form.theme_primary }}
              <div class="form-hint mt-1">Buttons &amp; links</div>
            </div>
            <div class="col-6 col-md-3">
              <label class="form-label fw-semibold">Secondary</label>
              {{ form.theme_secondary }}
              <div class="form-hint mt-1">Navbar / footer</div>
            </div>
            <div class="col-6 col-md-3">
              <label class="form-label fw-semibold">Accent</label>
              {{ form.theme_accent }}
              <div class="form-hint mt-1">Highlights / CTAs</div>
            </div>
            <div class="col-6 col-md-3">
              <label class="form-label fw-semibold">Success</label>
              {{ form.theme_success }}
              <div class="form-hint mt-1">Approved / success</div>
            </div>
          </div>
          <div class="mt-4 p-3 rounded-3 border" style="background:#f8fafc;">
            <div class="small text-muted mb-2">Live preview</div>
            <div class="d-flex flex-wrap gap-2 align-items-center">
              <span class="btn btn-sm btn-primary" id="previewPrimaryBtn">Primary button</span>
              <span class="badge" id="previewAccentBadge" style="background:var(--brand-accent);color:#111;">Accent</span>
              <span class="badge text-bg-success" id="previewSuccessBadge">Success</span>
              <div class="rounded-3 px-3 py-2 text-white small" id="previewNav" style="background:linear-gradient(135deg,var(--brand-secondary),var(--brand-primary));">Navbar sample</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Pricing -->
    <div class="tab-pane fade" id="pricing" role="tabpanel">
      <div class="card settings-card mb-3">
        <div class="card-body">
          <div class="settings-section-title">Currency display</div>
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label fw-semibold">Currency</label>
              {{ form.currency_code }}
              <div class="form-hint mt-1">Also used for Stripe Checkout (must match your Stripe account currency support).</div>
              {% if form.currency_code.errors %}<div class="text-danger small">{{ form.currency_code.errors.0 }}</div>{% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Display symbol</label>
              {{ form.currency_symbol }}
              <div class="form-hint mt-1">How prices appear on course cards (e.g. PKR, $, €).</div>
              {% if form.currency_symbol.errors %}<div class="text-danger small">{{ form.currency_symbol.errors.0 }}</div>{% endif %}
            </div>
          </div>
          <div class="alert alert-light border mt-3 mb-0 small">
            <i class="bi bi-info-circle text-primary me-1"></i>
            Course prices are set per course. Changing currency only changes the label — update course prices if you switch from PKR to USD.
          </div>
        </div>
      </div>
    </div>

    <!-- Payments -->
    <div class="tab-pane fade" id="payments" role="tabpanel">
      <div class="card settings-card mb-3">
        <div class="card-body">
          <div class="settings-section-title">How students activate courses</div>
          <p class="text-muted small mb-3">Enable one or both. Free courses (price 0) activate automatically.</p>

          <div class="row g-3 mb-4">
            <div class="col-md-6">
              <div class="pay-toggle-card h-100 {% if form.enable_manual_payment.value %}is-on{% endif %}" id="manualCard">
                <div class="d-flex justify-content-between align-items-start gap-2">
                  <div>
                    <div class="fw-bold"><i class="bi bi-receipt me-1 text-primary"></i>Manual payment</div>
                    <div class="form-hint mt-1">Student pays via bank/Easypaisa and uploads proof. You approve to activate.</div>
                  </div>
                  <div class="form-check form-switch m-0">
                    {{ form.enable_manual_payment }}
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="pay-toggle-card h-100 {% if form.enable_stripe_payment.value %}is-on{% endif %}" id="stripeCard">
                <div class="d-flex justify-content-between align-items-start gap-2">
                  <div>
                    <div class="fw-bold"><i class="bi bi-stripe me-1 text-primary"></i>Stripe</div>
                    <div class="form-hint mt-1">Online card payment. Course activates automatically after successful checkout.</div>
                  </div>
                  <div class="form-check form-switch m-0">
                    {{ form.enable_stripe_payment }}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="mb-4">
            <label class="form-label fw-semibold">Manual payment instructions</label>
            {{ form.manual_payment_instructions }}
            <div class="form-hint mt-1">Shown on the student payment page (account numbers, bank name, etc.).</div>
            {% if form.manual_payment_instructions.errors %}<div class="text-danger small">{{ form.manual_payment_instructions.errors.0 }}</div>{% endif %}
          </div>

          <div class="settings-section-title">Stripe API keys</div>
          <div class="row g-3">
            <div class="col-12">
              <label class="form-label fw-semibold">Publishable key</label>
              {{ form.stripe_publishable_key }}
              {% if form.stripe_publishable_key.errors %}<div class="text-danger small">{{ form.stripe_publishable_key.errors.0 }}</div>{% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Secret key</label>
              {{ form.stripe_secret_key }}
              {% if form.stripe_secret_key.errors %}<div class="text-danger small">{{ form.stripe_secret_key.errors.0 }}</div>{% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Webhook signing secret</label>
              {{ form.stripe_webhook_secret }}
              <div class="form-hint mt-1">Optional locally; recommended in production.</div>
              {% if form.stripe_webhook_secret.errors %}<div class="text-danger small">{{ form.stripe_webhook_secret.errors.0 }}</div>{% endif %}
            </div>
            <div class="col-12">
              <label class="form-label fw-semibold">Webhook endpoint URL</label>
              <div class="webhook-box">{{ webhook_url }}</div>
              <div class="form-hint mt-1">Add this URL in Stripe Dashboard → Developers → Webhooks for event <code>checkout.session.completed</code>.</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Email / SMTP -->
    <div class="tab-pane fade" id="email" role="tabpanel">
      <div class="card settings-card mb-3">
        <div class="card-body">
          <div class="settings-section-title">SMTP delivery</div>
          <p class="text-muted small mb-3">
            Enable SMTP so forgot-password, signup welcome, and admin emails actually reach inboxes.
            When disabled, the app uses <code>.env</code> / console backend (emails print to the server log in development).
          </p>
          <div class="pay-toggle-card mb-4 {% if settings_obj.smtp_enabled %}is-on{% endif %}" id="smtpCard">
            <div class="form-check form-switch mb-0">
              {{ form.smtp_enabled }}
              <label class="form-check-label fw-semibold" for="id_smtp_enabled">Use admin SMTP settings</label>
            </div>
            <div class="form-hint mt-1">Turn on after filling host, port, and credentials below.</div>
          </div>
          <div class="row g-3">
            <div class="col-md-8">
              <label class="form-label fw-semibold">SMTP host</label>
              {{ form.smtp_host }}
              {% if form.smtp_host.errors %}<div class="text-danger small">{{ form.smtp_host.errors.0 }}</div>{% endif %}
            </div>
            <div class="col-md-4">
              <label class="form-label fw-semibold">Port</label>
              {{ form.smtp_port }}
              <div class="form-hint mt-1">587 (TLS) or 465 (SSL)</div>
              {% if form.smtp_port.errors %}<div class="text-danger small">{{ form.smtp_port.errors.0 }}</div>{% endif %}
            </div>
            <div class="col-md-6">
              <div class="form-check form-switch">
                {{ form.smtp_use_tls }}
                <label class="form-check-label" for="{{ form.smtp_use_tls.id_for_label }}">Use TLS</label>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-check form-switch">
                {{ form.smtp_use_ssl }}
                <label class="form-check-label" for="{{ form.smtp_use_ssl.id_for_label }}">Use SSL</label>
              </div>
              {% if form.smtp_use_ssl.errors %}<div class="text-danger small">{{ form.smtp_use_ssl.errors.0 }}</div>{% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">SMTP username</label>
              {{ form.smtp_username }}
              {% if form.smtp_username.errors %}<div class="text-danger small">{{ form.smtp_username.errors.0 }}</div>{% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">SMTP password</label>
              {{ form.smtp_password }}
              {% if form.smtp_password.errors %}<div class="text-danger small">{{ form.smtp_password.errors.0 }}</div>{% endif %}
            </div>
            <div class="col-12">
              <label class="form-label fw-semibold">From address</label>
              {{ form.smtp_from_email }}
              <div class="form-hint mt-1">Example: <code>TSN Digital Academy &lt;noreply@yourdomain.com&gt;</code></div>
              {% if form.smtp_from_email.errors %}<div class="text-danger small">{{ form.smtp_from_email.errors.0 }}</div>{% endif %}
            </div>
          </div>
          <div class="mt-3 d-flex flex-wrap gap-2 align-items-center">
            <a href="{% url 'dashboard:email_templates' %}" class="btn btn-outline-primary btn-sm">
              <i class="bi bi-file-earmark-text me-1"></i>Manage email templates
            </a>
            <a href="{% url 'dashboard:compose_email' %}" class="btn btn-outline-secondary btn-sm">
              <i class="bi bi-send me-1"></i>Compose / bulk email
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="d-flex flex-wrap gap-2 justify-content-between align-items-center sticky-bottom py-3" style="background:linear-gradient(180deg,transparent,#f8f9fa 30%);">
    <a href="{% url 'dashboard:admin' %}" class="btn btn-outline-secondary">
      <i class="bi bi-arrow-left me-1"></i>Back to dashboard
    </a>
    <button type="submit" class="btn btn-primary px-4 fw-semibold">
      <i class="bi bi-check2-circle me-1"></i>Save settings
    </button>
  </div>
</form>

<div class="card settings-card mt-3" id="smtp-test-card">
  <div class="card-body">
    <div class="settings-section-title">Send test email</div>
    <p class="text-muted small mb-3">Uses the saved SMTP settings (save the form above first if you just changed them).</p>
    <form method="post" action="{% url 'dashboard:smtp_test' %}" class="row g-2 align-items-end">
      {% csrf_token %}
      <div class="col-md-6">
        <label class="form-label fw-semibold">Send test to</label>
        <input type="email" name="test_email" class="form-control" placeholder="you@example.com" required value="{{ request.user.email }}">
      </div>
      <div class="col-md-auto">
        <button type="submit" class="btn btn-outline-primary">
          <i class="bi bi-lightning me-1"></i>Send test
        </button>
      </div>
    </form>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
(function () {
  const symbols = {PKR:'PKR', USD:'$', EUR:'€', GBP:'£', AED:'AED', SAR:'SAR', INR:'₹'};
  const codeEl = document.getElementById('id_currency_code');
  const symbolEl = document.getElementById('id_currency_symbol');
  if (codeEl && symbolEl) {
    codeEl.addEventListener('change', function () {
      if (symbols[this.value]) symbolEl.value = symbols[this.value];
    });
  }
  function syncToggleCard(inputId, cardId) {
    const input = document.getElementById(inputId);
    const card = document.getElementById(cardId);
    if (!input || !card) return;
    const refresh = () => card.classList.toggle('is-on', input.checked);
    input.addEventListener('change', refresh);
    refresh();
  }
  syncToggleCard('id_enable_manual_payment', 'manualCard');
  syncToggleCard('id_enable_stripe_payment', 'stripeCard');
  syncToggleCard('id_smtp_enabled', 'smtpCard');

  // Open Email tab when hash is #email
  if (window.location.hash === '#email') {
    const tab = document.getElementById('email-tab');
    if (tab && window.bootstrap) {
      bootstrap.Tab.getOrCreateInstance(tab).show();
    }
  }

  const presets = {
    ocean: {primary:'#1e40af', secondary:'#0f2557', accent:'#f59e0b', success:'#059669'},
    emerald: {primary:'#047857', secondary:'#064e3b', accent:'#fbbf24', success:'#10b981'},
    sunset: {primary:'#c2410c', secondary:'#7c2d12', accent:'#f59e0b', success:'#15803d'},
    slate: {primary:'#334155', secondary:'#0f172a', accent:'#38bdf8', success:'#0d9488'},
    rose: {primary:'#be123c', secondary:'#881337', accent:'#fbbf24', success:'#059669'},
  };
  const presetEl = document.getElementById('id_theme_preset');
  const colorIds = ['id_theme_primary','id_theme_secondary','id_theme_accent','id_theme_success'];
  function applyPreset(name) {
    const c = presets[name];
    if (!c) return;
    document.getElementById('id_theme_primary').value = c.primary;
    document.getElementById('id_theme_secondary').value = c.secondary;
    document.getElementById('id_theme_accent').value = c.accent;
    document.getElementById('id_theme_success').value = c.success;
    previewColors();
  }
  function previewColors() {
    const p = document.getElementById('id_theme_primary').value;
    const s = document.getElementById('id_theme_secondary').value;
    const a = document.getElementById('id_theme_accent').value;
    const g = document.getElementById('id_theme_success').value;
    document.documentElement.style.setProperty('--brand-primary', p);
    document.documentElement.style.setProperty('--brand-secondary', s);
    document.documentElement.style.setProperty('--brand-accent', a);
    document.documentElement.style.setProperty('--brand-success', g);
  }
  if (presetEl) {
    presetEl.addEventListener('change', function () {
      if (this.value !== 'custom') applyPreset(this.value);
      previewColors();
    });
  }
  colorIds.forEach(id => {
    const el = document.getElementById(id);
    if (el) el.addEventListener('input', function () {
      if (presetEl) presetEl.value = 'custom';
      previewColors();
    });
  });
})();
</script>
{% endblock %}